<template>
    <van-action-sheet
        v-model:show="visible"
        :title="title"
    >
        <div class="meeting_record_list">
            <van-empty
				v-if="!list.length"
			   	image="//projectimg-1256680128.cos.ap-beijing.myqcloud.com/lpm/bd4d50fd-1214-423a-bbe8-2bc72dbd45b3.png"
			   	image-size="80"
			   	description="您尚未参会记录"
			/>

            <div class="list_item" v-for="item in list" :key="item.id">
                <div class="content">
                    <p class="title">{{ item.meetingCode }}</p>
                    <p class="desc">会议地址：{{ item.meetingAddr }}</p>
                    <p class="desc">会议时间：{{ item.meetingTime }}</p>
                </div>
                <div class="action text-primary">
                    <van-icon @click="copyMeetingCode(item.meetingCode)" name="column" size="32" />
                </div>
            </div>
        </div>
    </van-action-sheet>
</template>

<script setup>
import { ref, inject } from 'vue'
import useClipboard from "vue-clipboard3"

const api = inject('api')
const { toClipboard } = useClipboard();

const visible = ref(false)
const list = ref([])
const title = ref('')

const getMeetingList = async (speakerId) => {
    const res = await api.meetingList({
        page: 1,
        limit: 999,
        speakerId
    })

    if (!res.code) {
        list.value = res.data.list
    }
}

const init = ({ t, speakerId }) => {
    visible.value = true
    title.value = t
    getMeetingList(speakerId)
}

// 点击复制
const copyMeetingCode = async (text) => {
	try {
		await toClipboard(text);
		showSuccessToast("复制成功");
	} catch (err) {
		showToast("复制失败");
	}
}


defineExpose({
    init
})
</script>

<style lang="less">
@import '../../../less/config/var.less';

.meeting_record_list {
    padding: 20px 20px 50px;
    border-top: 1px solid @color-disabled;
    .list_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        & + .list_item {
            margin-top: 30px;
        }
        .content {
            p{
                font-size: 14px;
                margin: 0;
                &.title {
                    color: @color-black;
                    margin-bottom: 8px;
                }
                &.desc {
                    color: @color-gray;
                }
            }
           
        }
    }
}
</style>